import { Button, Form, message } from "antd"
import { Link } from "react-router"
import FormFactory from "../../../components/FormFactory"
import AuthBox from "../AuthBox"
import { gql, useMutation } from "@apollo/client"
import gqlError from "../../../libs/gql-error"
export const OrganRagisterMutation = gql`
  mutation OrganRegister(
    $account: String!,
    $password: String!,
    $name: String!,
    $city: String,
    $province: String,
    $email: String,
  ){
    organRegister(
      account: $account,
      password: $password,
      name: $name,
      city: $city,
      province: $province,
      email: $email,
    )
  }
`
const AuthOrganRegisterPage = () => {
  const [form] = Form.useForm()
  const [auth, { loading }] = useMutation(OrganRagisterMutation, {
    onCompleted({ organRegister }) {
      window.localStorage.setItem("token", organRegister)
      window.location.href = '/'
    },
    onError(error) {
      gqlError(error)
    },
  })
  return (
    <AuthBox
      title={(
        <div className="flex gap-2 justify-center">
          <div className="text-2xl">机构注册</div>
          <div>（带*号项必须输入）</div>
        </div>
      )}
      header={
        (
          <div className="flex justify-center items-center">
            <Link to="/auth/userRegister" className="text-blue-400">
              个人注册|
            </Link>
            <div className="text-green-400">
              机构注册
            </div>
          </div>
        )
      }
    >
      <FormFactory
        formProps={{
          onFinish: (value: any) => {
            const variables = {
              ...value,
              province: value.city[0],
              city: value.city[1],
            }
            if (value.password !== value.confirmPassword) {
              message.error('两次输入的密码不一致')
              return
            }
            auth({
              variables
            })
          },
          form,
          labelCol: {
            span: 6
          }
        }}
        options={[
          {
            label: '账号名称',
            name: 'account',
            type: 'text',
            placeholder: '请输入账号名称',
            rules: [{ required: true, message: '请输入账号名称' }],
          },
          {
            label: '机构名称',
            name: 'name',
            type: 'text',
            placeholder: '请输入机构名称',
            rules: [{ required: true, message: '请输入账号名称' }],
          },
          {
            label: '所在城市',
            name: 'city',
            type: 'city',
            placeholder: '请输入所在城市',
            rules: [{ required: true, message: '请输入账号名称' }],
          },
          {
            label: '输入密码',
            name: 'password',
            type: 'password',
            placeholder: '请输入密码',
            rules: [{ required: true, message: '请输入账号名称' }],
          },
          {
            label: '确认密码',
            name: 'confirmPassword',
            type: 'password',
            placeholder: '请输入密码',
            rules: [{ required: true, message: '请输入账号名称' }],
          }
        ]}
      />
      <div className="flex justify-between">
        <Button loading={loading} type="primary" onClick={form.submit}>
          立即注册
        </Button>
        <Link to="/auth/login">
          <Button type="link">
            立即登录
          </Button>
        </Link>
      </div>
    </AuthBox>
  )
}
export default AuthOrganRegisterPage